// pages/search/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    itemList: [{
      id: 1,
      text: '热门'
    }, {
      id: 2,
      text: '男装'
    }, {
      id: 3,
      text: '鞋包'
    }, {
      id: 4,
      text: '手机'
    }, {
      id: 5,
      text: '电器'
    }, {
      id: 6,
      text: '食品'
    }, {
      id: 7,
      text: '电脑'
    }, {
      id: 8,
      text: '百货'
    }, {
      id: 9,
      text: '服饰'
    }, {
      id: 10,
      text: '汽车'
    }, {
      id: 11,
      text: '家装'
    }, {
      id: 12,
      text: '运动'
    }, {
      id: 13,
      text: '母婴'
      }, {
        id: 14,
        text: '测试'
      }],

    goodsList: [{
      text: '热门',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '男装',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '鞋包',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '手机',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '电器',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '食品',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '电脑',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '百货',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '服饰',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '汽车',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '家装',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '运动',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
    }, {
      text: '母婴',
      goodsInfo: [{
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }, {
        url: '/images/menswear/goods.png',
        text: '爆款'
      }]
      }, {
        text: '测试',
        goodsInfo: [{
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
        }, {
          url: '/images/menswear/goods.png',
          text: '爆款'
          }, {
            url: '/images/menswear/goods.png',
            text: '爆款'
          }, {
            url: '/images/menswear/goods.png',
            text: '爆款'
          }]
      }],
    scrollTop: 0, //侧边栏滑块初始位置
    scrollGoodsTop: 0, //商品滑动位置
    index: 0, //初始分类列表下标
    typeId: 1, //分类列表初始ID
    rightListHeight: 0, //右侧商品分类展示区域高度     
    rigthHeadHeight: 0, //右侧滑块列表名称高度
    rigthImgHeight: 0, //右侧滑块单张图片高度
    leftItemHeight: 0, //左侧分类列表单个选项高度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    that.getRect(function() {
      that.countedItemHeight()
    })
  },
  /**
   * 获取不同屏幕节点大小，不同屏幕自适应
   * 获取分类名称view的高度和获取每张图片的高度的高度
   */
  getRect: function(callback) {
    var that = this
    callback = callback || function() {} //回调函数，必须先获取节点高度才能计算各组件的高度
    //获取右侧scroll-view的物理屏幕高度
    wx.createSelectorQuery().select('#rightList').boundingClientRect(function(rect) {
      var rightListHeight = rect.height
      that.setData({
        rightListHeight,
      })
    }).exec()
    //获取左侧scroll-view中每个选项的高度
    wx.createSelectorQuery().select('#leftItem').boundingClientRect(function(rect) {
      var leftItemHeight = rect.height
      that.setData({
        leftItemHeight,
      })
    }).exec()
    //获取右侧scroll-view中每个选项标题的高度
    wx.createSelectorQuery().select('#itemID').boundingClientRect(function(rect) {
      var rigthHeadHeight = rect.height
      that.setData({
        rigthHeadHeight,
      })
    }).exec()
    //获取右侧scroll-view中每个选项中单张图片的高度
    wx.createSelectorQuery().select('#imgID').boundingClientRect(function(rect) {
      var rigthImgHeight = rect.height
      that.setData({
        rigthImgHeight,
      })
      callback()
    }).exec()
  },

  /**
   * 根据获取的节点高度计算每一项的高度
   */
  countedItemHeight: function(successCallback) {
    var goodsList = this.data.goodsList
    var itemList = this.data.itemList
    var heightList = []
    //根据循环计算出每个选项中有几行图片，并计算出每个选项的高度
    for (var i = 0; i < goodsList.length; i++) {
      var imgNum = Math.ceil(goodsList[i].goodsInfo.length / 3)
      var itemHeight = imgNum * this.data.rigthImgHeight
      itemHeight = itemHeight + this.data.rigthHeadHeight
      heightList.push(itemHeight)
    }
    //将每个选项的高度保持在数组中，并以此赋值给右侧列表
    heightList.splice(0, 0, 0)
    heightList.pop()
    var height = 0
    for (var k = 0; k < heightList.length; k++) {
      height += heightList[k]
      itemList[k].height = height
    }
    console.log(itemList)
    this.setData({
      itemList,
    })
  },
  /**
   * 点击顶部搜索框，进入搜索详情页
   */
  goSearchTap: function() {
    wx.navigateTo({
      url: '../details/index',
    })
  },
  /**
   * 侧边栏导航点击事件
   */
  itemTap: function(e) {
    var index = e.currentTarget.dataset.index;
    var id = e.currentTarget.dataset.id;
    var height = e.currentTarget.dataset.height; //获取右侧每个选项的高度，并根据高度滑动右侧商品展示栏
    this.setData({
      index,
      typeId: id,
      scrollGoodsTop: height
    })
    //当点击的选项大于第三个时，左侧列表开始滑动
    if (index > 4) {
      var scrollTop = (index - 3) * this.data.leftItemHeight
      this.setData({
        scrollTop,
      })
    } else {
      this.setData({
        scrollTop: 0,
      })
    }
  },
  /**
   * 商品展示列表滑动事件
   */
  heightScroll: function(e) {
    var scrollHeight = e.detail.scrollTop; //获取当前滑动高度
    scrollHeight = scrollHeight + this.data.rigthHeadHeight + this.data.rigthImgHeight //当前滑动高度加上一定数值，方便左侧栏选定
    //判断当前滑动高度属于左侧哪个选项
    for (var i = 0; i < this.data.itemList.length - 1; i++) {
      if (scrollHeight > this.data.itemList[i].height && scrollHeight < this.data.itemList[i + 1].height) {
        this.setData({
          typeId: i + 1
        })
        break
      }
    }
    //当总高度-当前滑动的高度 < 物理高度时，直接将左侧选定为最后一个
    if (e.detail.scrollHeight - scrollHeight < this.data.rightListHeight) {
      this.setData({
        typeId: this.data.itemList.length,
      })
    }
    //当选定的选项不足4时，左侧不发生滑动
    if (this.data.typeId > 5) {
      var scrollTop = (this.data.typeId - 4) * this.data.leftItemHeight
      this.setData({
        scrollTop,
      })
    } else {
      this.setData({
        scrollTop: 0,
      })
    }
  },
})